import React, { memo, useState, useEffect } from 'react'
import '../../../assets/styles/components/order/queryCondition.scss'
import { Form, Input, Select, Button, DatePicker, Checkbox } from 'antd'
import PropTypes from 'prop-types'
import {vendorIDs} from '../../../config'
import SelectStoreIDs from '../../SelectStoreIDs'
import { debounce } from '../../../utils/common'

const {Option} = Select

const QueryCondition = props => {
  const {onFinish, query, orderStatus, onFieldsChange} = props
  const {keyword} = query

  const [orderStatusOptions, setOrderStatusOptions] = useState([])

  // 重组orderStatus
  useEffect(() => {
    const arr = []
    for (let status in orderStatus) {
      if (status < 120 & status > 0) {
        arr.push({
          label: orderStatus[status],
          value: parseInt(status, 10),
          disabled: false
        })
      }
    }
    setOrderStatusOptions(arr)
  }, [orderStatus])

  const handleOnFinish = (formQuery) => {
    console.log('search')
    onFinish(formQuery)
  }

  const statusChecked = checkedValue => {
    if (checkedValue.length === 1) {
      setOrderStatusOptions(orderStatusOptions.map(item => ({
        ...item,
        disabled: item.value === checkedValue[0]
      })))
    } else if (checkedValue.length === 2 && orderStatusOptions.some(item => item.disabled)) {
      setOrderStatusOptions(orderStatusOptions.map(item => ({
        ...item,
        disabled: false
      })))
    }
  }

  const dbOnFieldsChange = (changeFields, allFields) => {
    if (changeFields.length) {
      const json = {}
      allFields.forEach(item => {
        json[item.name[0]] = item.value
      })
      onFieldsChange(json)
    }
  }
  return (
    <Form
      // labelCol={{span: 4}}
      // wrapperCol={{span: 14}}
      style={{width: '100%'}}
      layout="inline"
      size="small"
      onFinish={handleOnFinish}
      initialValues={query}
      onFieldsChange={dbOnFieldsChange}
    >
      <Form.Item className="form-item" label="关键字:" name="keyword">
        <Input value={keyword} placeholder="请输入关键字" allowClear></Input>
      </Form.Item>
      <Form.Item className="form-item" label="平台:" name="vendorID">
        <Select style={{width: '80px'}}>
          <Option value={-1}>不限</Option>
          {
            vendorIDs.map(vendor => (
              <Option key={vendor.vendorID} value={vendor.vendorID}>{vendor.nick}</Option>
            ))
          }
        </Select>
      </Form.Item>
      <Form.Item className="form-item" label="门店:" name="storeIDs">
        <SelectStoreIDs></SelectStoreIDs>
      </Form.Item>
      <Form.Item className="form-item" label="时间范围:">
        <Form.Item name="isDateFinish" valuePropName="checked" style={{display: 'inline-block', marginRight: '0'}}>
          <Checkbox>完成时间</Checkbox>
        </Form.Item>
        <Form.Item name="fromDate" style={{display: 'inline-block', marginRight: '0'}}>
          <DatePicker allowClear={false} style={{width: '120px'}} format="YYYY-MM-DD"></DatePicker> 
        </Form.Item>
        <span>-</span>
        <Form.Item name="toDate" style={{display: 'inline-block'}}>
          <DatePicker allowClear={false} style={{width: '120px'}} format="YYYY-MM-DD"></DatePicker> 
        </Form.Item>
      </Form.Item>
      <Form.Item className="form-item" label="订单状态" name="statuss">
        <Checkbox.Group
          className="order-status"
          options={orderStatusOptions}
          onChange={statusChecked}
        ></Checkbox.Group>
      </Form.Item>
      <Form.Item className="form-item">
        <Button type="primary" htmlType="submit" style={{width: '100px'}}>查询</Button>
      </Form.Item>
    </Form>
  )
}

QueryCondition.propTypes = {
  onFinish: PropTypes.func,
  // statusCheckedChange: PropTypes.func,
  onFieldsChange: PropTypes.func,
  query: PropTypes.object.isRequired,
  orderStatus: PropTypes.object.isRequired
}

QueryCondition.defaultProps = {
  onFinish: (values) => {
    console.warn('onFinish need build')
    console.log(values)
  },
  // statusCheckedChange: (values) => {
  //   console.warn('statusCheckedChange need build')
  //   console.log(values)
  // },
  onFieldsChange: (changeFields, allFields) => {
    console.warn('onFieldsChange need build')
    console.log(changeFields, allFields)
  },
  orderStatus: {}
}

export default memo(QueryCondition)
